<template>
  <el-container>
    <el-aside width="30px"></el-aside>
    <el-container>
      <el-header>参数设置</el-header>
      <el-divider></el-divider>
      <el-main>
        <el-button type="info" @click="getConfig">获取配置信息</el-button>
        <el-divider></el-divider>
        <el-form label-position="left" label-width="350px" :model="formLabelAlign" ref="formLabelAlign">
          <el-form-item label="appear_time_regard_as_appear: " prop="appear_time_regard_as_appear">
            <el-col :span="12">
            <el-input v-model="formLabelAlign.appear_time_regard_as_appear" placeholder="15"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="circle_radius: " prop="circle_radius">
            <el-col :span="12">
            <el-input v-model="formLabelAlign.circle_radius" placeholder="100"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="dist_target_belong_unit: " prop="dist_target_belong_unit">
            <el-col :span="12">
            <el-input v-model="formLabelAlign.dist_target_belong_unit" placeholder="300"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="evaluation: " prop="evaluation">
            <el-col :span="12">
            <el-input v-model="formLabelAlign.evaluation" placeholder="false"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="history_len_threshold_regard_as_different_unit: " prop="history_len_threshold_regard_as_different_unit">
            <el-col :span="12">
            <el-input v-model="formLabelAlign.history_len_threshold_regard_as_different_unit" placeholder="10"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="long_expire_time: " prop="long_expire_time">
            <el-col :span="12">
            <el-input v-model="formLabelAlign.long_expire_time" placeholder="200000"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="max_history_len: " prop="max_history_len">
            <el-col :span="12">
            <el-input v-model="formLabelAlign.max_history_len" placeholder="250"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="miss_time_regard_as_disappear: " prop="miss_time_regard_as_disappear">
            <el-col :span="12">
            <el-input v-model="formLabelAlign.miss_time_regard_as_disappear" placeholder="15"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="safe_distance: " prop="safe_distance">
            <el-col :span="12">
            <el-input v-model="formLabelAlign.safe_distance" placeholder="100"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="speed_calculate_gap: " prop="speed_calculate_gap">
            <el-col :span="12">
            <el-input v-model="formLabelAlign.speed_calculate_gap" placeholder="20"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="use_lstm: " prop="use_lstm">
            <el-col :span="12">
            <el-input v-model="formLabelAlign.use_lstm" placeholder="false"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('formLabelAlign')">保存</el-button>
            <el-button type="success" @click="sendForm">提交</el-button>
            <el-button type="warning" @click="resetForm('formLabelAlign')">重置</el-button>
          </el-form-item>
        </el-form>

      </el-main>
    </el-container>
  </el-container>


</template>

<script>
    import axios from 'axios'

    export default {
        name: "Layout",
        data() {
          return {
            // labelPosition: 'right',
            formLabelAlign: {
              appear_time_regard_as_appear: '',
              circle_radius: '',
              dist_target_belong_unit: '',
              evaluation: '',
              history_len_threshold_regard_as_different_unit: '',
              long_expire_time: '',
              max_history_len: '',
              miss_time_regard_as_disappear: '',
              safe_distance: '',
              speed_calculate_gap: '',
              use_lstm: '',
          },
            // url1: 'http://localhost',
            // url1: 'http://192.168.8.84',
            url1: 'http://192.168.11.129',
            port: ':8008',
        };
      },
      methods: {
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              // alert('submit!');
              // console.log(this.formLabelAlign);
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },

        resetForm(formName) {
          this.$refs[formName].resetFields();
        },

        sendForm(){
          this.submitForm('formLabelAlign');
          console.log(this.formLabelAlign);
          this.$axios({
            url: this.url1 + this.port + '/sendForm',
            methods: 'get',
            param: {
              formd: 'gaaaa',
            },
          })
            .then((response)=>{
              console.log(response.data);
            })
            .catch(function (error) { // 请求失败处理
              // console.log(error);
              alert("设置参数失败！");
            });
        },

        getEcho() {
          // axios.get(this.url1 + this.port + '/echo',{
          //   params:{
          //     hello: 'world',
          //   }
          // })
          this.$axios({
            // url: this.url2 + this.port + '/echo',
            url: this.url1 + this.port + '/echo',
            method: 'get',
            params: {
              hello: "world",
              // instruction: "start",
            }
          })
            .then(response => {
            alert(response.data);
          }).catch(error => {
            // this.$Message.info("启动失败");
            alert("Failure!!!");
          })
        },

        getConfig() {
          // axios.get(this.url1 + this.port + '/echo',{
          //   params:{
          //     hello: 'world',
          //   }
          // })
          this.$axios({
            // url: this.url2 + this.port + '/echo',
            url: this.url1 + this.port + '/getConfig',
            method: 'get',
          })
            .then(response => {
              let temp = response.data;
              for(let key in temp){
                this.formLabelAlign[key] = temp[key];
              }
            }).catch(error => {
            // this.$Message.info("启动失败");
            alert("获取默认配置失败");
          })
        },

      },
    }
</script>

<style scoped>
  .el-header {
    background-color: #ffffff;
    color: #333;
    text-align: left;
    line-height: 70px;
    font-size: 25px;
  }

  .el-aside {
    background-color: #ffffff;
    color: #fff;
    text-align: center;
    line-height: 200px;
    font-size: 20px;
  }

  .el-main {
    background-color: #fff;
    color: #333;
    text-align: left;
    line-height: 60px;
    font-size: 40px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }


</style>
